<script setup>
import { ref } from "vue";
const swipeList = ref([
	{
		id: 1,
		img: "https://oss.dingdongdr.com/dingdong/images/e43311c3-2697-4620-ac5e-194d6f3b6140.jpg",
	},
	{ id: 2, img: "https://oss.dingdongdr.com/dingdong/images/6613966b-8521-44ca-a9e2-4213f68144e6.jpg" },
]);
const onChange = () => {};
const tabList = ref([
	{
		id: 1,
		img: "https://oss.dingdongdr.com/static/user/%E9%80%89%E9%A1%B9%E7%9B%AE%20%E6%8B%B7%E8%B4%9D.png",
		title: "选项目",
		subTitle: "医护项目快速选",
	},
	{
		id: 2,
		img: "https://oss.dingdongdr.com/static/user/%E9%80%89%E5%8C%BB%E6%8A%A4%20%E6%8B%B7%E8%B4%9D%202.png",
		title: "选医护",
		subTitle: "专业医护放心选",
	},
]);
// 科室
const ctionList = ref([
	{
		id: 1,
		img: "https://oss.dingdongdr.com/static/user/伤造口专科.png",
		title: "伤造口专科",
	},
	{
		id: 2,
		img: "https://oss.dingdongdr.com/static/user/静疗专科.png",
		title: "静疗专科",
	},
	{
		id: 3,
		img: "https://oss.dingdongdr.com/static/user/母婴专科.png",
		title: "母婴专科",
	},
	{
		id: 4,
		img: "https://oss.dingdongdr.com/static/user/常用临床护理.png",
		title: "常用临床护理",
	},
	{
		id: 5,
		img: "https://oss.dingdongdr.com/static/user/腹透专科.png",
		title: "腹透专科",
	},
	{
		id: 6,
		img: "https://oss.dingdongdr.com/static/user/腹透专科.png",
		title: "腹透专科",
	},
]);
/* 项目 */
const projectList = ref([
	{
		id: 1,
		img: "https://oss.dingdongdr.com/dingdong/images/5e107ccd-5a84-41bb-961c-4f319b8cdbc7.png",
	},
	{
		id: 2,
		img: "https://oss.dingdongdr.com/dingdong/images/0a89cfe2-a917-4b64-ad7b-3a73ccbf5c2e.png",
	},
	{
		id: 3,
		img: "https://oss.dingdongdr.com/dingdong/images/a5ccee64-3e04-4907-9656-bf3395690990.png",
	},
	{
		id: 4,
		img: "https://oss.dingdongdr.com/dingdong/images/bc894199-bf6a-47a7-a238-24b70c0df832.png",
	},
	{
		id: 5,
		img: "https://oss.dingdongdr.com/dingdong/images/78bdc925-a552-46bf-a05c-279a90c60441.png",
	},
	{
		id: 6,
		img: "https://oss.dingdongdr.com/dingdong/images/6f1f58f1-c2ed-4c2e-af90-971251907ba5.png",
	},
	{
		id: 7,
		img: "https://oss.dingdongdr.com/dingdong/images/d09f8c95-c297-416b-ab0b-c56d18def0a1.png",
	},
	{
		id: 8,
		img: "https://oss.dingdongdr.com/dingdong/images/083da84f-6d5f-46db-aed8-cfcc582942d0.png",
	},
]);
/* 专家 */
const expertList = ref([
	{
		id: 1,
		img: "http://www.dingdongdr.com/dingdong/file/picFile/20190528133414.jpg",
		name: "韩春茂",
		rank: "副主任医师",
		hospital: "浙江大学医学院附属第二医院",
		desc: "毕业于日本金泽医科大学形成外科，医学及哲学博士。",
	},
	{
		id: 2,
		img: "https://oss.dingdongdr.com/static/doctor/20211202085452.jpg",
		name: "李霖",
		rank: "副主任医师",
		hospital: "浙江大学医学院附属邵逸夫医院",
		desc: "浙江大学医学院附属邵逸夫医院内分泌科 副主任医师，邵逸夫医院糖尿病足多学科联合诊治中心 秘书",
	},
]);
/* 医护 */
const professionalNursing = ref([
	{
		id: 1,
		img: "https://oss.dingdongdr.com/static/enter/doctor1.png",
		name: "孙红玲",
		rank: "副主任护士",
		score: "5.0",
		hospital: "北京市朝阳区中医医院",
		project: ["造口护理", "压疮护理"],
	},
	{
		id: 3,
		img: "https://oss.dingdongdr.com/static/enter/doctor3.png",
		name: "夏金萍",
		rank: "主管护士",
		score: "5.0",
		hospital: "北京市朝阳区中医医院",
		project: ["造口护理", "压疮护理"],
	},
	{
		id: 2,
		img: "https://oss.dingdongdr.com/static/enter/doctor2.png",
		name: "孙艳",
		rank: "主管护士",
		score: "5.0",
		hospital: "北京市朝阳区中医医院",
		project: ["造口护理", "压疮护理"],
	},
]);
</script>
<template>
	<div class="relative">
		<van-swipe @change="onChange" :autoplay="3000">
			<van-swipe-item v-for="item in swipeList" :key="item.id">
				<img :src="item.img" alt="" />
			</van-swipe-item>
		</van-swipe>
		<div
			class="absolute bottom-[20px] right-[30px] h-[25px] w-[70px] rounded-[20px] bg-white text-center leading-[25px]"
		>
			杭州市▾
		</div>
	</div>
	<div
		class="mx-auto my-[10px] grid w-[350px] grid-cols-2 place-items-center gap-[10px] rounded-[10px] bg-white p-[10px]"
	>
		<div class="flex items-center justify-center" v-for="item in tabList" :key="item.id">
			<img class="h-[65px] w-[62px]" :src="item.img" alt="" />
			<div class="bg-white py-[10px]">
				<p class="text-[16px]">{{ item.title }}</p>
				<p class="text-[12px] text-[#848484]">{{ item.subTitle }}</p>
			</div>
		</div>
	</div>
	<!-- 项目 -->
	<div class="mx-auto my-[10px] grid w-[350px] rounded-[10px] bg-white pt-[10px]">
		<div class="mx-auto grid w-[350px] grid-cols-5 place-items-center gap-[10px] rounded-[10px] p-[10px]">
			<div class="flex flex-col items-center" v-for="item in ctionList" :key="item.id">
				<img class="mb-[6px] h-[32px] w-[32px]" :src="item.img" alt="" />
				<p class="... w-[60px] truncate text-[14px] text-[#333333]">{{ item.title }}</p>
			</div>
		</div>
		<div class="mx-auto grid w-[350px] grid-cols-4 place-items-center gap-[10px] rounded-[10px] bg-white p-[10px]">
			<img class="h-[76px] w-[76px]" v-for="item in projectList" :key="item.id" :src="item.img" alt="" />
		</div>
	</div>
	<!-- 咨询专家 -->
	<div class="mx-auto my-[10px] flex w-[350px] items-center justify-between">
		<div class="text-[17px] font-[600]">咨询专家</div>
		<div class="text-[#9e9e9e]">更多<van-icon name="arrow" /></div>
	</div>
	<div class="mx-auto my-[10px] h-[100px] w-[350px] overflow-y-hidden">
		<div class="h-[110px] overflow-x-auto">
			<div class="flex w-[560px]">
				<div
					class="mr-[10px] flex h-[100px] w-[280px] rounded-[10px] bg-white p-[10px]"
					v-for="item in expertList"
					:key="item.id"
				>
					<div class="h-[80px] w-[80px]">
						<img class="h-full w-full rounded-[10px]" :src="item.img" alt="" />
					</div>
					<div class="ml-[10px] w-[198px]">
						<div class="felx items-center">
							{{ item.name }}&nbsp;&nbsp;&nbsp;<span
								class="inline-block rounded-[4px] bg-[#ffecdd] px-[4px] py-[1px] text-[10px] text-[#fb7716]"
								>{{ item.rank }}</span
							>
						</div>
						<p class="my-[2px] text-[12px]">{{ item.hospital }}</p>
						<p class="line-clamp-2 w-full text-[11px] text-[#848484]">{{ item.desc }}</p>
					</div>
				</div>
			</div>
		</div>
	</div>
	<!-- 合作医护 -->
	<div class="mx-auto my-[10px] flex w-[350px] items-center justify-between p-[10px]">
		<div class="text-[17px] font-[600]">合作医护</div>
		<div class="text-[#9e9e9e]">更多<van-icon name="arrow" /></div>
	</div>
	<div class="mx-auto my-[10px] grid w-[350px] rounded-[10px] bg-white px-[10px]">
		<div class="mt-[20px] flex" v-for="item in professionalNursing" :key="item.id">
			<div class="h-[50px] w-[50px]"><img class="rounded-full" :src="item.img" alt="" /></div>
			<div class="ml-[10px]">
				<div class="felx items-center">
					{{ item.name }}&nbsp;&nbsp;&nbsp;<span
						class="inline-block rounded-[4px] bg-[#ffecdd] px-[4px] py-[1px] text-[12px] text-[#fb7716]"
						>{{ item.rank }}</span
					>
				</div>
				<p class="my-[6px] text-[12px]">{{ item.hospital }}</p>
				<p class="my-[10px]">
					<span
						class="mr-[4px] inline-block rounded-[4px] border border-[#357efe] px-[4px] py-[1px] text-[12px] text-[#357efe]"
						v-for="obj in item.project"
						:key="obj"
						>{{ obj }}</span
					>
				</p>
				<p class="w-[270px] border-b border-[#f7f9fa]"></p>
			</div>
		</div>
	</div>
	<!-- 合作机构 -->
	<div class="mx-auto my-[10px] flex w-[350px] items-center justify-between">
		<div class="text-[17px] font-[600]">合作机构</div>
	</div>
	<div
		class="mx-auto my-[10px] h-[90px] w-[350px] rounded-[10px] bg-[url('https://oss.dingdongdr.com/static/user/%E5%90%88%E4%BD%9C%E6%9C%BA%E6%9E%84.png')] bg-contain bg-no-repeat"
	></div>
</template>
